<template>
  <div class="login flex flex-column flex-align-center">
    <div class="logo flex flex-center">
      <IconLogo/>
    </div>
    <div class="to-top"></div>
    <van-form class="login-form" ref="login_ref">
      <div class="login-form-item flex flex-align-center">
        <div class="iniput-icon flex flex-align-center">
          <IconPhone/>
        </div>
        <!-- <input type="text" placeholder="请输入账号" /> -->
        <van-field
            v-model="username"
            name="用户名"
            clearable
            label="用户名"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请输入账号!' },{ pattern, message: '手机号格式不正确！' }]"
        />
      </div>
      <div class="divider"></div>
      <div class="login-form-item flex flex-align-center">
        <div class="iniput-icon flex flex-align-center">
          <IconPwd/>
        </div>
        <!-- <input type="password" placeholder="请输入登录密码" /> -->
        <van-field
            v-model="password"
            name="登录密码"
            type="password"
            clearable
            label="登录密码"
            placeholder="请输入登录密码"
            :rules="[{ required: true, message: '请输入登录密码!' }]"
        />
      </div>
    </van-form>
    <div class="other-page flex flex-content-end">
      <a @click="register">注册账号</a>
    </div>
    <button class="login-button" @click="login">立即登录</button>
    <div class="options">
      <input type="checkbox" label="用户协议"/>
      <a>用户协议</a>
    </div>
  </div>
</template>
<script lang="ts" name="ChildView" setup>
import IconPhone from '../components/icons/IconPhone.vue'
import IconPwd from '../components/icons/IconPwd.vue'
import IconLogo from '../components/icons/IconLogo.vue'
import {useRouter} from 'vue-router'
import {inject, ref} from 'vue'
import {getCurrentInstance} from '@vue/runtime-core'

const $ajax:any = inject("$ajax")
const $api:any = inject("$api")
const currentInstance:any = getCurrentInstance()
const $this = currentInstance.proxy
const pattern = /(^1[3456789]\d{9})|(test.*)$/;
const username = ref('')
const password = ref('')
const router = useRouter()
/**
 * 登錄
 */
const login = () => {

  $this.$refs.login_ref.validate().then(async () => {
    const data = await $ajax(
        {
          api: $api.login,
          data: {
            "pwd": password.value,
            "username": username.value
          }
        }
    )
    localStorage.setItem('token', data.data.token)
    router.push('/home')
  }).catch(() => {
    //验证失败
  })

}
/**
 * 注册
 */
const register = () => {
  router.push('/register')
}
</script>
<style lang="less" scoped>
.login {
  min-height: 100vh;
  font-size: 0.16rem;
  padding-top: 0.6rem;
  background: #e2eeff;
  padding: 0.36rem;

  .logo {
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 0;
    margin: 0.6rem 0;

    img {
      width: 0.8rem;
      height: 0.8rem;
    }
  }

  .to-top {
    width: 0;
    height: 0;
    border-bottom: 10px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
  }

  .login-form {
    background: #fff;
    width: 100%;
    border-radius: 0.04rem;
    padding: 0.2rem;

    .divider {
      border-bottom: 1px solid #e2eeff;
    }

    .login-form-item {
      .iniput-icon {
        width: 0.24rem;
        font-size: 0.16rem;
      }

      :deep(.van-field__label) {
        display: none;
      }

      input {
        -webkit-appearance: none;
        -webkit-border-radius: 0px;
        font-size: 0.16rem;
        padding: 0.1rem;
        margin: 0.1rem 0;
        border: none;
        border-radius: 0;

        &:focus {
          outline: none;
        }
      }
    }
  }
}

.other-page {
  width: 100%;
  padding-top: 0.05rem;

  a {
    color: #6588ff;
    font-size: 0.15rem;
  }
}

.login-button {
  -webkit-appearance: none;
  outline: none;
  margin-top: 0.45rem;
  border-radius: 10px;
  background: #6588ff;
  color: #fff;
  border: none;
  width: 2.4rem;
  height: 0.44rem;
  flex-shrink: 0;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;

  &:focus,
  &:active,
  &:hover {
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-focus-ring-color: none;
  }
}

.options {
  margin-top: 0.4rem;

  a {
    margin-left: 0.1rem;
    color: #6588ff;
    font-size: 0.15rem;
  }
}
</style>
